<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="软件园商城 - 用户管理系统">
	<meta name="author" content="">
	<title>用户管理 | 软件园商城</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<!-- Custom styles -->
	<link href="css/dashboard.css" rel="stylesheet" th:href="@{/css/dashboard.css}">
	<style type="text/css">
		:root {
			--primary-color: #4e73df;
			--secondary-color: #f8f9fc;
			--accent-color: #2e59d9;
			--text-color: #5a5c69;
			--error-color: #e74a3b;
			--success-color: #1cc88a;
			--info-color: #36b9cc;
			--warning-color: #f6c23e;
		}

		body {
			background-color: #f8f9fc;
			color: var(--text-color);
			font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		}

		.card {
			border: none;
			border-radius: 0.35rem;
			box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
			margin-bottom: 1.5rem;
		}

		.card-header {
			background-color: var(--primary-color);
			color: white;
			border-bottom: none;
			padding: 1rem 1.35rem;
			border-radius: 0.35rem 0.35rem 0 0 !important;
		}

		.table-responsive {
			padding: 0;
		}

		.table {
			margin-bottom: 0;
			width: 100%;
		}

		.table thead th {
			border-bottom: 2px solid #e3e6f0;
			color: #6c757d;
			font-weight: 600;
			text-transform: uppercase;
			font-size: 0.75rem;
			letter-spacing: 0.05em;
			padding: 1rem;
		}

		.table td {
			padding: 1rem;
			vertical-align: middle;
			border-top: 1px solid #e3e6f0;
		}

		.table-striped tbody tr:nth-of-type(odd) {
			background-color: rgba(0, 0, 0, 0.02);
		}

		.table-hover tbody tr:hover {
			background-color: rgba(78, 115, 223, 0.05);
		}

		.btn-sm {
			padding: 0.375rem 0.75rem;
			font-size: 0.875rem;
			border-radius: 0.2rem;
			margin-right: 0.25rem;
			transition: all 0.2s;
		}

		.btn-sm:hover {
			transform: translateY(-1px);
			box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
		}

		.btn-success {
			background-color: var(--success-color);
			border-color: var(--success-color);
		}

		.btn-info {
			background-color: var(--info-color);
			border-color: var(--info-color);
		}

		.btn-danger {
			background-color: var(--error-color);
			border-color: var(--error-color);
		}

		.action-bar {
			margin-bottom: 1.5rem;
		}

		.action-bar .btn {
			margin-right: 0.5rem;
			margin-bottom: 0.5rem;
		}

		.selected-ids {
			background-color: #f8f9fa;
			padding: 0.75rem 1.25rem;
			border-radius: 0.35rem;
			margin: 1rem 0;
			font-size: 0.9rem;
			color: var(--text-color);
		}

		.pagination-bar {
			margin-top: 1.5rem;
			display: flex;
			justify-content: center;
		}

		.pagination-bar .btn {
			margin: 0 0.25rem;
		}

		.message-box {
			padding: 0.75rem 1.25rem;
			border-radius: 0.35rem;
			margin-bottom: 1rem;
			background-color: #f8d7da;
			border-color: #f5c6cb;
			color: #721c24;
		}

		.page-title {
			font-weight: 600;
			color: var(--primary-color);
			margin-bottom: 1.5rem;
			display: flex;
			align-items: center;
		}

		.page-title i {
			margin-right: 0.75rem;
			font-size: 1.5rem;
		}

		/* Animation */
		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.animated-content {
			animation: fadeIn 0s ease-out;
		}

		/* Responsive adjustments */
		@media (max-width: 768px) {
			.table-responsive {
				padding: 0;
			}

			.action-bar .btn {
				display: block;
				width: 100%;
				margin-bottom: 0.5rem;
			}
		}
	</style>

</head>

<body>
<div th:replace="muen :: headmeun"></div>

<div class="container-fluid">
	<div class="row">
		<div th:replace="muen :: #sidebarMenu(lurl='usertrue')"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4 animated-content">
			<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-3 mb-4 border-bottom">
				<h1 class="page-title">
					<i class="fas fa-users-cog"></i>用户管理
				</h1>
			</div>

			<div th:if="${msg!=null and msg!=''}" class="message-box" th:text="${msg}"></div>

			<div class="action-bar">
				<a class="btn btn-success btn-sm" href="#" th:href="@{/showInsertUser}">
					<i class="fas fa-user-plus"></i> 增加用户
				</a>
				<a class="btn btn-success btn-sm" href="#" th:href="@{/deleteMoreUser}">
					<i class="fas fa-users-slash"></i> 批量删除
				</a>
				<a class="btn btn-success btn-sm" href="#" th:href="@{/clearMoreUserId}">
					<i class="fas fa-broom"></i> 清除已选择的数据
				</a>
				<a class="btn btn-success btn-sm" href="#" th:href="@{/showFindByNameContaining}">
					<i class="fas fa-search"></i> 搜索功能
				</a>
			</div>

			<div class="card shadow mb-4">
				<div class="card-header py-3">
					<h6 class="m-0 font-weight-bold text-white">用户列表</h6>
				</div>
				<div class="card-body">
					<div class="table-responsive">
						<table class="table table-striped table-hover">
							<thead class="thead-light">
							<tr>
								<th>多选操作</th>
								<th>编号</th>
								<th>姓名</th>
								<th>性别</th>
								<th>年龄</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr th:each="user:${pageInfo.list}">
								<td style="width: 120px" class="border border-gray-300 p-2">
									<a class="btn btn-success btn-sm" href="#"
									   th:href="@{/addMoreIdToDelete/}+${user.id}" th:value="${user.id}"
									   onclick="handleClick(this)">
										<i class="fas fa-check"></i> 选择
									</a>
								</td>
								<td th:text="${user.id}"></td>
								<td th:text="${user.name}"></td>
								<td th:text="${user.sex}"></td>
								<td th:text="${user.age}"></td>
								<td>
									<a class="btn btn-success btn-sm" href="#" th:href="@{/selectUserById/}+${user.id}">
										<i class="fas fa-eye"></i> 查看
									</a>
									<a class="btn btn-info btn-sm" href="#" th:href="@{/showUpdateUser/}+${user.id}">
										<i class="fas fa-edit"></i> 修改
									</a>
									<a class="btn btn-danger btn-sm" href="#" th:href="@{/deletUser/}+${user.id}" onclick="return confirm('确定要删除此用户吗？')">
										<i class="fas fa-trash-alt"></i> 删去
									</a>
								</td>
							</tr>
							</tbody>
						</table>
					</div>

					<div class="selected-ids" th:if="${session.myList!=null and !session.myList.isEmpty()}">
						<i class="fas fa-list"></i> 已选择批量删除的用户ID：<span th:text="${session.myList}"></span>
					</div>

					<div class="pagination-bar">
						<a class="btn btn-success btn-sm" href="#" th:href="@{/page/}+${pageInfo.pageNum-1}+'/3'">
							<i class="fas fa-arrow-left"></i> 上一页
						</a>
						<a class="btn btn-info btn-sm" href="#" th:href="@{/page/}+${pageInfo.pageNum+1}+'/3'">
							下一页 <i class="fas fa-arrow-right"></i>
						</a>
						<a class="btn btn-danger btn-sm" href="#" th:href="@{/page}+'/1'+'/3'">
							<i class="fas fa-home"></i> 首页
						</a>
					</div>
				</div>
			</div>
		</main>
	</div>
</div>

<script>


</script>






<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/jquery-3.2.1.slim.min.js" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

<!-- Icons -->
<script type="text/javascript" src="js/feather.min.js" th:src="@{/js/feather.min.js}"></script>
<script>
	feather.replace()
</script>
</body>
</html>